<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML文本与图片标签示例</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            line-height: 1.6;

            max-width: 800px;

            margin: 0 auto;

            padding: 20px;

        }

        .image-container {

            margin: 20px 0;

            padding: 10px;

            border: 1px solid #ddd;

            border-radius: 5px;

        }

        img {

            max-width: 100%;

            height: auto;

        }

    </style>

</head>

<body>

    <h1>HTML文本与图片标签演示</h1>

    <h2>1. 文本标签示例</h2>

    <p>这是一个段落标签 &lt;p&gt;，用于展示普通文本内容。</p>

    <p>可以使用格式化标签：

        <strong>这是粗体文本（&lt;strong&gt;）</strong>，

        <em>这是斜体文本（&lt;em&gt;）</em>，

        <u>这是下划线文本（&lt;u&gt;）</u>，

        <s>这是删除线文本（&lt;s&gt;）</s>

    </p>

    <p>可以创建换行<br>使用&lt;br&gt;标签实现</p>

    <p>预格式化文本（&lt;pre&gt;）会保留空格和换行：</p>

    <pre>

def hello_world():

    print("Hello, World!")

    # 这是一段Python代码示例

hello_world()

    </pre>

    <p>引用文本可以使用&lt;blockquote&gt;：</p>

    <blockquote>

        这是一段引用文本，通常会显示缩进效果，用于引用他人的话语或文章片段。

    </blockquote>

    <h2>2. 图片标签示例</h2>

    <div>

        <h3>基本图片展示（&lt;img&gt;）</h3>

        <img src="https://picsum.photos/600/400?random=1" alt="自然风光示例图片" title="点击查看大图">

        <p>这是一张自然风光图片，使用src属性指定图片路径，alt属性提供替代文本</p>

    </div>

     <div>

        <h3>带有尺寸控制的图片</h3>

        <img src="https://picsum.photos/600/400?random=2" alt="城市建筑示例图片" width="300" height="200">

        <p>通过width和height属性控制图片显示尺寸</p>

    </div>

    <div>

        <h3>图片作为链接</h3>

        <a href="https://example.com">

            <img src="https://picsum.photos/600/400?random=3" alt="可点击的示例图片" style="border: 2px solid #333;">

        </a>

        <p>将图片包裹在&lt;a&gt;标签内，使图片成为可点击的链接</p>

    </div>

</body>

</html>
